---
import Layout from '../layouts/Default.astro'
import Navbar from '../components/Navbar.astro'
import NavbarClone from '../components/NavbarClone.astro'
const title = 'Home'
---

<Layout title={title}>
  <section class="hero is-fullheight is-grey">
    <Navbar />

    <NavbarClone />

    <div class="hero-body">
      <div class="container">
        <div class="columns is-vcentered">
          <div class="column is-5 landing-caption">
            <h1 class="title is-1 is-bold is-spaced">Manage and deploy your apps seamlessly.</h1>
            <h2 class="subtitle is-5 is-muted">Lorem ipsum sit dolor amet is a dummy text used by typography industry</h2>
            <div>
              <a class="button cta primary-btn raised mr-2"> Get Started </a>
              <a class="button cta"> Discover</a>
            </div>
          </div>
          <div class="column is-7">
            <img src="/img/illustrations/worker.svg" class="hero-image" alt="Description" />
          </div>
        </div>
      </div>
    </div>

    <div class="hero-foot mb-20">
      <div class="container">
        <div class="tabs is-centered">
          <ul>
            <li>
              <a><img class="partner-logo" src="/img/logo/clients/systek.svg" /> </a>
            </li>
            <li>
              <a><img class="partner-logo" src="/img/logo/clients/tribe.svg" /> </a>
            </li>
            <li>
              <a><img class="partner-logo" src="/img/logo/clients/kromo.svg" /> </a>
            </li>
            <li>
              <a><img class="partner-logo" src="/img/logo/clients/infinite.svg" /> </a>
            </li>
            <li>
              <a><img class="partner-logo" src="/img/logo/clients/gutwork.svg" /> </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section is-medium">
    <div class="container">
      <div class="title-wrapper has-text-centered">
        <h2 class="title is-2">Great Power Comes</h2>
        <h3 class="subtitle is-5 is-muted">With great Responsability</h3>
        <div class="divider is-centered"></div>
      </div>

      <div class="feature-cards content-wrapper">
        <div class="columns">
          <div class="column is-4">
            <div class="feature-card is-bordered has-text-centered is-feature-reveal">
              <div class="card-title">
                <h4>App builder</h4>
              </div>
              <div class="card-icon">
                <img src="/img/icons/web.svg" />
              </div>
              <div class="card-text">
                <p>This is some cool explanatory text that is on two rows</p>
              </div>
              <div class="card-action">
                <a href="#" class="button btn-align-md primary-btn raised">Free Trial</a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="feature-card is-bordered has-text-centered is-feature-reveal">
              <div class="card-title">
                <h4>Cloud integration</h4>
              </div>
              <div class="card-icon">
                <img src="/img/icons/rocket.svg" />
              </div>
              <div class="card-text">
                <p>This is some explanatory text that is on two rows</p>
              </div>
              <div class="card-action">
                <a href="#" class="button btn-align-md primary-btn raised">Get Started</a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="feature-card is-bordered has-text-centered is-feature-reveal">
              <div class="card-title">
                <h4>Addons & Plugins</h4>
              </div>
              <div class="card-icon">
                <img src="/img/icons/light-bulb.svg" />
              </div>
              <div class="card-text">
                <p>This is some explanatory text that is on two rows</p>
              </div>
              <div class="card-action">
                <a href="#" class="button btn-align-md primary-btn raised">Get Started</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section is-medium section-feature-grey">
    <div class="container">
      <div class="title-wrapper has-text-centered">
        <h2 class="title is-2">Awesome Features</h2>
        <h3 class="subtitle is-5 is-muted">To make you super happy</h3>
        <div class="divider is-centered"></div>
      </div>

      <div class="columns is-vcentered side-feature mt-60">
        <div class="column is-4 is-offset-2">
          <h3 class="title is-3 mb-10 is-title-reveal">Connect with people</h3>
          <p class="subtitle is-5 is-muted">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.
          </p>
        </div>
        <div class="column is-5">
          <img src="/img/illustrations/features/feature-1.png" alt="" />
        </div>
      </div>

      <div class="columns is-vcentered side-feature mt-60">
        <div class="column is-5 is-offset-1">
          <img src="/img/illustrations/features/feature-2.png" alt="" />
        </div>
        <div class="column is-4 is-offset-1">
          <h3 class="title is-3 mb-10 is-title-reveal">Collaborate easily</h3>
          <p class="subtitle is-5 is-muted">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-feature-grey is-medium">
    <div class="container">
      <div class="columns is-vcentered app-side">
        <div class="column is-4 is-offset-1">
          <h3 class="title is-3 is-spaced is-title-reveal">An intuitive app</h3>
          <p class="subtitle is-5 is-muted">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.
          </p>
        </div>
        <div class="column is-7">
          <div class="has-text-centered">
            <img class="side-image" src="/img/illustrations/workers.svg" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section is-medium">
    <div class="container">
      <div class="title-wrapper has-text-centered">
        <h2 class="title is-2">Wait, there's more</h2>
        <h3 class="subtitle is-5 is-muted">To make you super happy</h3>
        <div class="divider is-centered"></div>
      </div>

      <div class="content-wrapper">
        <div class="columns is-multiline icon-list">
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="fa6-brands:github"></iconify-icon>
              </div>
              <h4>Github</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="fa6-brands:bitbucket"></iconify-icon>
              </div>
              <h4>Bitbucket</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="fa6-brands:slack"></iconify-icon>
              </div>
              <h4>Slack</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="fa6-brands:npm"></iconify-icon>
              </div>
              <h4>Npm</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="fluent:javascript-16-regular"></iconify-icon>
              </div>
              <h4>Javascript</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="fontisto:nodejs"></iconify-icon>
              </div>
              <h4>Nodejs</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="ph:angular-logo"></iconify-icon>
              </div>
              <h4>Angular</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="bi:google"></iconify-icon>
              </div>
              <h4>Google</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="carbon:logo-python"></iconify-icon>
              </div>
              <h4>Python</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="bi:wordpress"></iconify-icon>
              </div>
              <h4>WordPress</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="icon-park-solid:android"></iconify-icon>
              </div>
              <h4>Android</h4>
              <p>Some feature text</p>
            </div>
          </div>
          <div class="column is-3">
            <div class="feature-icon has-text-centered">
              <div class="icon-wrap is-icon-reveal">
                <iconify-icon class="iconify" icon="uiw:apple"></iconify-icon>
              </div>
              <h4>Apple</h4>
              <p>Some feature text</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section is-medium has-background-image" data-background="https://source.unsplash.com/g30P1zcOzXo/1600x900" data-color="#4FC1EA" data-color-opacity=".6">
    <div class="overlay"></div>
    <div class="container">
      <div class="title-wrapper has-text-centered">
        <h2 class="title is-2 light-text is-spaced">Our clients love us</h2>
        <h3 class="subtitle is-5 light-text">Look at what they say about us</h3>
      </div>

      <div class="testimonials content-wrapper">
        <div class="columns is-vcentered">
          <div class="column is-4">
            <figure class="testimonial">
              <blockquote>
                Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
              </blockquote>
              <div class="author">
                <img src="/img/illustrations/faces/1.png" alt="" />
                <div>
                  <h5>Irma Walters</h5>
                  <span>Accountant</span>
                </div>
              </div>
            </figure>
          </div>
          <div class="column is-4">
            <figure class="testimonial">
              <blockquote>
                Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
              </blockquote>
              <div class="author">
                <img src="/img/illustrations/faces/2.png" alt="" />
                <div>
                  <h5>John Bradley</h5>
                  <span>Financial Analyst</span>
                </div>
              </div>
            </figure>
          </div>
          <div class="column is-4">
            <figure class="testimonial">
              <blockquote>
                Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
              </blockquote>
              <div class="author">
                <img src="/img/illustrations/faces/3.png" alt="" />
                <div>
                  <h5>Gary Blackman</h5>
                  <span>HR Manager</span>
                </div>
              </div>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section is-medium">
    <div class="container">
      <div class="title-wrapper has-text-centered">
        <h2 class="title is-2">Get Started</h2>
        <h3 class="subtitle is-5 is-muted">Choose one of our plans</h3>
        <div class="divider is-centered"></div>
      </div>

      <div class="pricing-wrap">
        <div class="feature-card is-pricing has-text-centered">
          <h3 class="plan-name">Starter</h3>
          <img src="/img/illustrations/pricing/1.svg" alt="" />
          <div class="price">0</div>
          <p>Sign up, get some awesome features and get started now</p>
          <a class="button is-fullwidth is-bold">Get Started</a>
        </div>
        <div class="feature-card is-pricing has-text-centered">
          <h3 class="plan-name">Pro</h3>
          <img src="/img/illustrations/pricing/2.svg" alt="" />
          <div class="price">15</div>
          <p>Sign up, get some awesome features and get started now</p>
          <a class="button is-fullwidth primary-btn raised is-bold">Get Started</a>
        </div>
        <div class="feature-card is-pricing has-text-centered">
          <h3 class="plan-name">Business</h3>
          <img src="/img/illustrations/pricing/3.svg" alt="" />
          <div class="price">30</div>
          <p>Sign up, get some awesome features and get started now</p>
          <a class="button is-fullwidth is-bold">Get Started</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-light-grey is-medium">
    <div class="container">
      <div class="title-wrapper has-text-centered">
        <h2 class="title is-2 is-spaced">Drop us a line or two</h2>
        <h3 class="subtitle is-5 is-muted">We'd love to hear from You</h3>
        <div class="divider is-centered"></div>
      </div>

      <div class="content-wrapper">
        <div class="columns">
          <div class="column is-6 is-offset-3">
            <form>
              <div class="columns is-multiline">
                <div class="column is-6">
                  <input class="input is-medium" type="text" placeholder="First Name *" />
                </div>
                <div class="column is-6">
                  <input class="input is-medium" type="text" placeholder="Last Name *" />
                </div>
                <div class="column is-6">
                  <input class="input is-medium" type="text" placeholder="Email *" />
                </div>
                <div class="column is-6">
                  <input class="input is-medium" type="email" placeholder="Company" />
                </div>
                <div class="column is-12">
                  <textarea class="textarea" rows="6" placeholder=""></textarea>
                </div>
                <div class="column is-12">
                  <div class="form-footer has-text-right mt-10">
                    <button class="button cta is-large primary-btn form-button raised is-clear">Send Message</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div id="auth-modal" class="modal">
    <div class="modal-background modal-dismiss"></div>
    <div class="modal-content">
      <div class="flex-card auth-card">
        <div class="tabs-wrapper">
          <div class="tabs">
            <ul>
              <li class="is-active" data-tab="login-tab"><a>Login</a></li>
              <li data-tab="register-tab"><a>Register</a></li>
            </ul>
          </div>
          <div id="login-tab" class="tab-content is-active">
            <div class="field">
              <label>Username</label>
              <div class="control">
                <input type="text" class="input is-medium" placeholder="Enter username" />
              </div>
            </div>
            <div class="field">
              <label>Password</label>
              <div class="control">
                <input type="password" class="input is-medium" placeholder="Enter password" />
              </div>
            </div>

            <a class="button is-fullwidth secondary-btn is-rounded raised">Log in</a>
          </div>
        </div>
      </div>
    </div>
    <button class="modal-close is-large modal-dismiss" aria-label="close"></button>
  </div>
</Layout>
